
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单元素Demo</title>
</head>
<body>
		<!-- 1.表单元素
		用来圈定的数据的范围，在此范围内的数据才能提交给服务器。 -->
	<form action="http://www.tmooc.cn">
		<!-- 2.表单控件（共12个）：用来给用户输入的框 -->
		<!-- 2.1 input(9个) -->
		<!-- 文本框： 
				value:设置默认值
				maxlength:设置最大长度
				readonly:设置只读-->
		<p>
			账号:
			<input type="text" value="tarena"
				maxlength="10" readonly/>
		</p>
		<!-- 密码框：属性同文本框 -->
		<P>
			密码:
			<input type="password" value="123456"/>
		</P>		
		
		
		<!-- 单选框 
			name:组名，同一组radio会互斥
			checked：设置默认选中
			value:奖励再讲-->	
		<p>
			性别:
			<input type="radio" name="sex" checked/>男
			<input type="radio" name="sex"/>女
		</p>
		
		
		<!-- 多选框:
			checked:设置默认选中
			name,value:将来再说 -->
		<p>
			兴趣:
			<input type="checkbox" checked/>养生
			<input type="checkbox" checked/>美食
			<input type="checkbox"/>社交
			<input type="checkbox"/>竞技		
		</p>
				
		
		
		<!-- 隐藏框：用来向服务器发送不希望被用户看到的数据 -->
		<p>
			<input type="hidden" value="123love"/>
		</p>
		
		
		<!-- 文件框 -->
		<p>
			头像:
			<input type="file"/>		
		</p>
		
		
		<!-- 按钮 -->	
		<p>
			<input type="reset" value="重置"/>
			<input type="submit" value="注册"/>
			<input type="button" value="演示"/>
		
		</p>
				
		<!-- 2.2 其他(3个) -->
		<!-- label
			作用：将控件与文字绑定到一起，增加控件的面积，便于操作。
			id :是元素的唯一标志，任何元素都有id -->		
		<p>
			<input type="checkbox" id="协议"/>
			<label for="协议">我已阅读并愿意遵守此协议！</label>
		</p>
		
		
		<!-- select 下拉选 
			selected:设置默认选中-->
		<p>
			城市:
			<select>
				<option>请选择</option>
				<option selected>北京</option>
				<option>上海</option>
				<option>广州</option>
				<option>杭州</option>
				<option>苏州</option>
			</select>
		</p>
		
		
		<!-- 文本域
			cols;设置宽度；
			rows:设置高度
			文本域中间的文本是文本域的默认值 -->
		<p>
			简介:
			<textarea cols="20" rows="8">请输入内容：</textarea>
		</p>
		
		
		
		
		
		
		
			
	
	</form>
		
		
</body>
</html>